{% extends 'common/panel.html' %}
{% block title %}{{instance.name}}{% endblock title %}
{% block panel %}
    <h1>{{instance.name}}</h1>
    {% if instance.array %}
        <p>part of the <a class="myshapes-link" href="{{instance.array.get_absolute_url}}">{{instance.array.name}}</a> Group.</p>
    {% endif %}
    <div class="tabs">
        <ul>
            <li><a href="#Attributes"><span>Information</span></a></li>
            <li><a href="{% url zone-impacts instance.pk %}"><span>Cumulative Impacts</span></a></li>
            <li><a href="{% url zone-threats instance.pk %}"><span>Human Activities</span></a></li>
        </ul>
        <div id="Attributes">
            <ul class="metadata">
              {% if instance.user.first_name and instance.user.last_name %} 
                <li class="creator">Created By {{instance.user.first_name}} {{instance.user.last_name}}</li>
              {% else %}
                <li class="creator">Created By {{instance.user.username}}</li>
              {% endif %}
                <li class="created">Created {{instance.date_created|date:"d M, Y P"}}</li>
                <li class="modified">Modified {{instance.date_modified|date:"d M, Y P"}}</li>
                <br class="clear" />
            </ul>
            <h2>Geographic Information</h2>
	    <p><strong>Area (sq mi)</strong> {{instance.area_sqmi|floatformat:"-1"}}</p>
            
            {% if instance.designation %}
            <h2>Zone Designation</h2>
	    <p><strong>{{instance.designation.name}}</strong></p>
            {% endif %}
            
            <h2>Other Information</h2>
            <p><strong>Zone ID:</strong> {{instance.pk}}</p>
        </div>
        
        
    </div>
{% endblock panel %}
